<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>抖音</title>
        <style type="text/css">
            body { margin: 0 ; padding : 0 ; }
            .container {
                /* position 采用 absolute 表示相对于 浏览器窗口 或 第一个非static定位的父元素 进行定位 */
                position: absolute ; /* 一定要注意 .container 的定位方式是 absolute 不是 static */
                left : 0 ;
                top : 0 ;
                width: 100% ;
                height: 100% ;
            }

            .video-bg {
                /* position 采用 absolute 表示相对于 浏览器窗口 或 第一个非static定位的父元素 进行定位 */
                position: absolute ; /* 当父元素不是 static 定位时，就相对于父元素定位 */
                left: 0 ;
                top : 0 ;
                width: 50% ;
                height: 50% ;
                border: 10px solid blue ;
                z-index: -250 ;
            }

            .content {
                /* position 采用 absolute 表示相对于 浏览器窗口 或 第一个非static定位的父元素 进行定位 */
                position: absolute ; /* 当父元素不是 static 定位时，就相对于父元素定位 */
                left: 0 ;
                top : 0 ;
                width: 75% ;
                height: 75% ;
                border: 10px solid red ;
                z-index: 250 ;
            }
        </style>
    </head>
    <body>

        <div class="container">
            <div class="video-bg"></div>
            <div class="content"></div>
        </div>

    </body>
</html>